function getData(url){
    return new Promise(function(resolve){
        //创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
        //设置请求
        xhr.open("GET",url)
        //发送请求
        xhr.send();
        //通过xhr的一个事件监听来获取请求的响应状态和数据
        xhr.onreadystatechange = function(){
            //readyState这个状态会从0逐渐变化到4 如果变到了4说明请求响应成功了
            if(xhr.readyState === 4){
                //说明请求数据成功了 可以将当前的Promise修改为成功状态 并且存储数据
                resolve(xhr.response)
            }
        }
    })
}

async function fn() {
    //发送异步请求获取数据
    const res = await getData('http://project.x-zd.net:3001/apis/citylist')
    // console.log(res)

    //转成js对象
    const allData = JSON.parse(res)
    console.log(allData)

    /**
   * 渲染方法:可以将list数组中的数据转成dom字符串,填充到对应select下的ul容器中
   * @param {*} select 选择框(将来填充数据的时候,需要指定:省份选择框/城市选择框/地区选择框)
   * @param {*} list   数据源(对应的选择框所需要的数据)
   */
    function fillSelect(select,list){
        //填充的时候,做一个判断,如果list中没有数据,那么对应的select禁用 --- 以下有两种方式解决
        //第一种:if
        // if(list.length > 0){
        //     select.classList.remove('disabled')
        // }else{
        //     select.classList.add('disabled')
        // }

        //第二种:三元运算
        select.className = `select ${list.length > 0 ? '' : 'disabled'}`

        //获取对应选择框下的ul容器
        // document.querySelector('#selProvince .options')     等同于 document.querySelector('#selProvince').querySelector('.options')
        // document.querySelector('#selCity .options')         等同于 document.querySelector('#selCity').querySelector('.options')
        // document.querySelector('#selArea .options')         等同于 document.querySelector('#selArea').querySelector('.options')
        const ul = select.querySelector('.options')

        //将list中的js对象转成dom字符串,然后拼接成一个完整的字符串,填充到ul下
        ul.innerHTML = list.map(item => `<li>${item.label}</li>`).join('')
    }

    //获取省市区的select标签
    const province = document.querySelector('#selProvince')
    const city = document.querySelector('#selCity')
    const area = document.querySelector('#selArea')

    //获取省市区的数据源
    let provinceList = allData.data 
    let cityList = []   //provinceList[2].children --- 测试河北省城市数据的填充效果
    let areaList = []

    //调用fillSelect给省市区select填充数据
    fillSelect(province,provinceList)
    fillSelect(city,cityList)
    fillSelect(area,areaList)

    //  ================处理选择框title区域的点击事件(以province为例)=======================
    // //获取title区域
    // const title = province.querySelector('.title')

    // //添加点击事件
    // title.addEventListener('click',function(){
    //     //如果标题区域是一个禁用,给出提示,直接返回
    //     if(province.classList.contains('disabled')){
    //         console.log('禁用状态,不能点击')
    //         return
    //     }

    //     //在展开之前,获取当前页面有没有已经展开的下拉框
    //     const selectedExpand = document.querySelector('.select.expand')//必须要用交集选择器

    //     //如果当前页面有展开的下拉框,并且不是我点击的这个,就把它收起来
    //     if(selectedExpand && selectedExpand != province){
    //         selectedExpand.classList.remove('expand')
    //     }

    //     //切换当前点击的select的展示状态
    //     province.classList.toggle('expand')

    //     //处理展开下拉选择框中li的点击事件(可以使用事件委托,可以动态的给新增的元素绑定事件)
    //     //获取下拉选择框ul
    //     const ul = province.querySelector('ul')

    //     //添加点击事件(事件委托,事件是添加在父类上)
    //     ul.addEventListener('click',function(e){
    //         //获取当前点击的li
    //         const li = e.target
    //         console.dir(li)

    //         //如果点击的不是li,就不做任何操作
    //         if(li.nodeName != 'LI'){//注意:LI都是大写
    //             return
    //         }

    //         //设置样式:将之前高亮的li取消高亮,给当前点击的li添加高亮效果
    //         const preActiveLi = province.querySelector('li.active')//使用交集选择器
    //         if(preActiveLi){
    //             preActiveLi.classList.remove('active')
    //         }
    //         li.classList.add('active')

    //         //更改当前选择框title区域的标题数据
    //         province.querySelector('.title span').innerHTML = li.innerHTML

    //         //点击之后,收起当前选择框
    //         province.classList.remove('expand')
    //     })
    // })


     /**
   * 封装处理不同的select的title和li的点击事件
   * @param {*} select 需要注册点击事件的select下拉框
   */
    function registerSelectEvent(select){
        //获取title区域
        const title = select.querySelector('.title')

        //添加点击事件
        title.addEventListener('click',function(){
            //如果标题区域是一个禁用,给出提示,直接返回
            if(select.classList.contains('disabled')){
                console.log('禁用状态,不能点击')
                return
            }

            //在展开之前,获取当前页面有没有已经展开的下拉框
            const selectedExpand = document.querySelector('.select.expand')//必须要用交集选择器

            //如果当前页面展开的下拉框,并且不是我点击的这个,就把它收起来
            if(selectedExpand && selectedExpand != select){
                selectedExpand.classList.remove('expand')
            }

            //切换当前点击的select的展示状态
            select.classList.toggle('expand')

            //处理展开下拉选择框中li的点击事件(可以使用事件委托,可以动态的给新增的元素绑定事件)
            //获取下拉选择框ul
            const ul = select.querySelector('ul')

            //添加点击事件(事件委托,事件是添加在父类上)
            ul.addEventListener('click',function(e){
                //获取当前点击的li
                const li = e.target
                console.dir(li)

                //如果点击的不是li,就不做任何操作
                if(li.nodeName != 'LI'){//注意:LI都是大写
                    return
                }

                //设置样式:将之前高亮的了li取消高亮,给当前点击的li添加高亮效果
                const preActiveLi = select.querySelector('li.active')//使用交集选择器
                if(preActiveLi){
                    preActiveLi.classList.remove('active')
                }
                li.classList.add('active')

                //更改当前选择框title区域的标题数据
                select.querySelector('.title span').innerHTML = li.innerHTML

                //点击之后,收起当前选择框
                select.classList.remove('expand')
            })
        })
    }
    //注册每一个选择框的点击事件
    registerSelectEvent(province)
    registerSelectEvent(city)
    registerSelectEvent(area)

    //单独处理点击不同的省份的特殊逻辑:根据选中的省份重新设置对应的城市数据
    function registerProvinceEvent(){
        //获取省份对应的ul容器
        const ul = province.querySelector('ul')
        //使用事件委托给里面的li添加事件
        ul.addEventListener('click',function(e){
            //获取具体点击的li
            const li = e.target
            //判断如果不是li,不做任何操作
            if(li.nodeName != 'LI'){//注意:LI都是大写
                return
            }

            //获取点击的省份名称
            const name = li.innerHTML

            //在provinceList中查找省份对应的城市数据
            const obj = provinceList.find(item => item.label == name)
            cityList = obj.children

            //重新设置当前省份对应的城市和地区数据
            fillSelect(city,cityList)
            fillSelect(area,[])

            //重新设置城市和地区title的内容
            city.querySelector('.title span').innerHTML = '请选择城市'
            area.querySelector('.title span').innerHTML = '请选择地区'
        })
    }
    registerProvinceEvent()

    //单独处理点击不同的城市的特殊逻辑:根据选中的城市重新设置城市对应的地区数据
    function registerCityEvent(){
        //获取城市对应的ul容器
        const ul = city.querySelector('ul')
        //使用事件委托给里面的li添加事件
        ul.addEventListener('click',function(e){
            //获取具体点击的li
            const li = e.target
            //判断如果不是li,不做任何操作
            if(li.nodeName != 'LI'){//注意:LI都是大写
                return
            }

            //获取点击的城市的名称
            const name = li.innerHTML

            //在在cityList中查找省份对应的城市数据
            const obj = cityList.find(item => item.label == name)
            areaList = obj.children

            //===细节问题:有些城市下面没有地区:列如海南省除了海口市,下面都没有区,获取出来的就是undefined
            console.log(areaList)

            //可以添加一个判断,如果城市下面没有地区,直接赋值[]
            if(areaList == undefined){
                fillSelect(area,[])
                area.querySelector('.title span').innerHTML = '无地区'
                return
            }

            //重新设置当前城市对应的地区数据
            fillSelect(area,areaList)

            //重新设置地区title的内容
            area.querySelector('.title span').innerHTML ='请选择地区'
        })
    }
    registerCityEvent()
    
}

fn()